フロートラベル Float Label
https://gyazo.com/443dc226a1bc23c3772a9335a328e655
Label ラベル UIの仲間
フォーカス インジケーター Focus indicatorが当たっていない時
Label ラベル UIがForm フォーム UIの中に存在
フォーカス インジケーター Focus indicatorが当たった時
Label ラベル UIがForm フォーム UI上部に移動
問題
ヒント Hint用のスペースがない
対策
textareaバーの下にvalidation バリデーションで出すのが良さそう
例: 123-4567
入力済と勘違いされる
プレースホルダー Placeholderと同様
可読性 readabilityの減少
対策
Color 色 UIの調整
Space スペース 空白の節約ができていない
Label ラベル UIの移動先にスペースが必要
対策
↑のgifのように全体としてのサイズ感は同じで、変化時のFont フォントサイズが可変であればok
参考
How the Float Label Pattern Started